<template>
    <section>
        <el-row :span="24" style="padding: 18px 2px;">
            <el-button type="primary" icon="el-icon-circle-plus" @click="createClock()" round>添加</el-button>
        </el-row>
        <el-row>
            <el-col style="width: 335px; padding: 10px 5px" v-for="(value, key) in cardData">
                <el-card class="time-box-card">
                    <div slot="header">
                        <i class="el-icon-close" @click="deleteClock(value['id'])" style="float: right; position: relative; top: -10px; right: -10px"></i>
                        <el-input v-model="value['name']" style="width: 75%"></el-input>
                        <el-switch
                                v-model="homeSwitch[key]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                style="margin-left: 12px;"
                                @change="changeSwitch(key)"
                        >
                        </el-switch>
                    </div>
                    <div style="overflow: hidden">
                        <span style="line-height: 38px; margin-left: 2px">灯光</span>
                        <el-slider v-model="value['value']" style="width: 79%; float:right; margin-right: 15px"></el-slider>
                    </div>
                    <div >
                        <span style="line-height: 38px; margin-left: 2px">时间</span>
                        <template>
                            <el-time-select
                                    v-model="value['begin_time']"
                                    style = "width: 59%; padding: 15px 4px; margin-left: 7px"
                                    :picker-options="{
                                        start: '00:00',
                                        step: '0:01',
                                        end: '23:59'
                                    }"
                                    placeholder="选择时间">
                            </el-time-select>
                        </template>
                    </div>
                    <div style="padding: 3px 0px">
                        <span style="line-height: 38px; margin-left: 2px">设备</span>
                        <el-select
                                v-model="deviceLists[key]"
                                multiple
                                collapse-tags
                                style="margin-right: 3px; float:right; width: 83%"
                                placeholder="请选择"
                                id="device_select"
                        >
                            <el-option
                                    v-for="item in devices"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="week">
                        <el-checkbox v-model="weekDay[key][0]" @change="weekClick(key)" border>周日</el-checkbox>
                        <el-checkbox v-model="weekDay[key][1]" @change="weekClick(key)" border>周一</el-checkbox>
                        <el-checkbox v-model="weekDay[key][2]" @change="weekClick(key)" border>周二</el-checkbox>
                    </div>
                    <div class="week">
                        <el-checkbox v-model="weekDay[key][3]" @change="weekClick(key)" border>周三</el-checkbox>
                        <el-checkbox v-model="weekDay[key][4]" @change="weekClick(key)" border>周四</el-checkbox>
                        <el-checkbox v-model="weekDay[key][5]" @change="weekClick(key)" border>周五</el-checkbox>
                    </div>
                    <div class="week">
                        <el-checkbox v-model="weekDay[key][6]" @change="weekClick(key)" border>周六</el-checkbox>
                        <el-button type="primary" icon="el-icon-edit" style="float:right; width: 65%;"
                                   @click="updateClock(value, key)">确认</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </section>
</template>

<style>
    .week {
        padding: 10px 0px;
    }
    .time-box-card {
        width: 320px;
        height: 450px;
    }
</style>

<script>

    import Vue from 'vue';
    import {getTimes, createTime, deleteTime, updateTime} from '../../api/api';

    export default {
        data() {
            return {
                cardNum: 0,
                cardData: {},
                deviceLists: [],
                homeSwitch: [],
                weekDay: [],
                beginTime: [],
                endTime: [],
                startTime: [],
                value: 0,
                form: {
                    'id' : 0,
                    'name' : '',
                    'week' : '',
                    'value' : 0,
                    'switch_id' : 0
                },
                devices: []
            };
        },
        methods: {
            init() {
                getTimes().then((res) => {
                    this.cardData = res.data.data;
                    this.devices = res.data.info;
                    this.cardData.map((_, index) => {
                        this.homeSwitch[index] = _['status'] == 1 ? true:false;
                        this.weekDay[index] = [];
                        this.deviceLists[index] = (_['deviceLists'].length  == 0) ? [] : _['deviceLists'].map(_=>parseInt(_));
                        for (var y=0; y<_['weekLists'].length; y++) {
                            this.weekDay[index][y] = _['weekLists'][y] == 1 ? true:false;
                        }
                    });

                });
            },
            createClock() {
                createTime().then((res) => {
                    if (res.data.code == "OK") {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.init();
                });
            },
            deleteClock(id) {
                this.$confirm('确定要删除吗？', '提示', {}).then(() => {
                    deleteTime(id).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.init();
                    });
                });
            },
            updateClock(data, key) {
                console.log(this.weekDay[key]);
                data.weekDay = this.weekDay[key];
                data.deviceLists = this.deviceLists[key];
                updateTime(data).then((res) => {
                    if (res.data.code == "OK") {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.init();
                });
            },
            weekClick(key) {
                Vue.set(this.weekDay, key, this.weekDay[key]);
            },
            changeSwitch(key) {
                this.cardData[key]['status'] = !this.cardData[key]['status'];
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
